<template>
  <div class="page-container">
    <div class="grid-container">
      <a-row type="flex" class="grid-table-tool">
        <a-col :span="10" :order="1" class="tool-action">
          <a-input-search placeholder="手机号/姓名" v-model="params.key" @search="onSearch" style="width:300px;">
            <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
          </a-input-search>
        </a-col>
        <a-col :span="14" :order="2" class="tool-pagination">
        </a-col>
      </a-row>
      <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
        <template slot="count" slot-scope="text,record">
          {{fmMoney(record.count,0)}}
        </template>
        <template slot="totalAmount" slot-scope="text,record">
          {{fmMoney(record.depositTotal,2,true)}}
        </template>
        <template slot="operation" slot-scope="text,record">
          <a @click="onShowDetail(record)">明细</a>
        </template>
        <a-table style="padding-left: 7px;" slot="expandedRowRender" slot-scope="record" :columns="innerColumns" :dataSource="record.deposit"  :rowKey="item => item.id" :pagination="false" :showHeader="false">
          <template slot="orderNo" slot-scope="text,record">
            {{record.orderNo}}
          </template>
          <template slot="num" slot-scope="text,record">1</template>
          <template slot="amount" slot-scope="text,record">
            {{fmMoney(record.amount,2,true)}}
          </template>
          <template slot="createAt" slot-scope="text,record">
            {{moment(record.createAt).format('YYYY-MM-DD HH:mm:ss')}}
          </template>
          <template slot="operation" slot-scope="text,record" >
            <a @click="onBackBucket(record)">退桶</a>
          </template>
        </a-table>
      </a-table>
      <a-row type="flex" class="grid-table-tool">
        <a-col :span="12" :order="1" class="tool-action"></a-col>
        <a-col :span="12" :order="2" class="tool-pagination">
          <a-pagination :total="total" v-if="total>params.pageSize" @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
        </a-col>
      </a-row>
    </div>
    <a-modal top="2vh" title="会员押金明细" v-model="dialogVisible" :footer="null" width="700px" :maskClosable="false" @cancel="dialogVisible = false">
      <deposit-detail :member="member" @refund="handleBackBucket" v-if="dialogVisible"></deposit-detail>
    </a-modal>
  </div>
</template>
<script>
  import {findList,backBucket} from "@/api/deposit";
  import {fmMoney} from "@/utils/index";
  import moment from 'moment/moment'
  import DepositDetail from '../assets/components/DepositDetail'
  const columns = [
      { title: '会员昵称', dataIndex: 'nickName', key: 'nickName',align:'center',width:200 },
      { title: '会员手机号', dataIndex: 'phone', key: 'phone' ,align:'center',width:200},
      { title: '订单号', key: 'orderNo' ,align:'center',width:200 },
      { title: '桶数', dataIndex: 'count', key: 'count' ,align:'right',width:200,scopedSlots: { customRender: 'count' } },
      { title: '押金总额', dataIndex: 'totalAmount', key: 'totalAmount' ,align:'right',scopedSlots: { customRender: 'totalAmount' },width:200},
      { title: '下单时间', key: 'createAt' ,align:'center',width:200 },
      { title: '操作', dataIndex: 'operation', key: 'operation' ,align:'center',scopedSlots: { customRender: 'operation' }},
  ];
  const innerColumns = [
    { title: 'orderNo', dataIndex: 'orderNo', key: 'orderNo',align:'right',width:600,scopedSlots: { customRender: 'orderNo' }},
    { title: 'num', dataIndex: 'num', key: 'num',align:'right' ,width:200,scopedSlots: { customRender: 'num' }},
    { title: 'amount', dataIndex: 'amount', key: 'price' ,align:'right',width:200,scopedSlots: { customRender: 'amount' }},
    { title: 'createAt', dataIndex: 'createAt', key: 'createAt',align:'center' ,width:200,scopedSlots: { customRender: 'createAt' }},
    {title:'operation',align:'center',scopedSlots: { customRender: 'operation' }}];

  export default {
    components:{DepositDetail},
    data() {
        return {
          columns,
          innerColumns,
          dataList: [],
          total: 0,
          creates: [],
          params: {
            key: '',
            current: 1,
            pageSize: 10
          },
          loading: false,
          dialogVisible: false,
          member: null
        }
    },
    methods:{
        moment,
        fmMoney,
        onSearch(){
            this.params.current = 1;
            this.onLoad();
        },
        onChange(current){
            this.params.current = current;
            this.onLoad();
        },
      onShowDetail(record){
        this.member = record;
        this.dialogVisible = true;
      },
      onBackBucket(member,record){
        const that = this;
        this.$confirm({
          title: '此操作前请确保桶已回收,确认退返所选记录押金吗?',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            that.handleBackBucket(member,[record])
          }, onCancel() {},
        })
      },
      async handleBackBucket(member,records){
          if(records != null && records.length>0){
            let resp = await backBucket(records)
            if(this.qUtil.validResp(resp)){
              this.$message.success('押金已退返至客户['+member.nickName+']微信账号')
              this.dialogVisible = false;
              this.member = null;
              this.onLoad()
            }else{
              this.$message.error(resp.errMsg || '退款操作失败')
            }
          }
      },
      async onLoad(){
        this.loading = true;
        let resp = await findList(this.params);
        this.loading = false;
        if(this.qUtil.validResp(resp)) {
          this.total = resp.data.total;
          this.dataList = resp.data.dataList;
        }
        console.log("dataList==>",this.dataList);
      }
    },
    mounted(){
        this.onLoad();
    },
  }
</script>

